<template>
  <AppHeader title="重点词组归纳" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
      <div class="container-img" v-for="item in obj.resource.media_items" :key="item.id">
        <img :src="obj.resmain + item.file_url" alt="" />
      </div>
  </div>
  <div class="btn" @click="submit">
    <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">读完了</van-button>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import {onMounted,onBeforeUnmount,ref} from 'vue'
const router = useRouter();
var time = 0
const obj = ref({resource:{media_items:[]}})
onMounted(()=>{
  obj.value = JSON.parse(sessionStorage.getItem('resource'))
})
var timer = setInterval(async ()=>{
  time ++
  console.log(time)
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer)
  timer = null
})
const submit = ()=>{
  router.push('/writtenTest/completeTask')
  sessionStorage.setItem('time',time)
}
const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.container {
  height:100%;
  background-color: #ffffff;
  padding-top: 44px;
  padding-bottom:10px;
  overflow: scroll;
  .container-img{
    padding:10px;
    img{
      width: 100%;
    }
  }
  .btn{
  }
}
</style>
